<template>
	<view class="cu-w-100 cu-position-relative">
		<scroll-view
		  scroll-x 
		  class="horizontal-scroll-container cu-w-100 cu-position-absolute"
		  :show-scrollbar="showScrollbar"
		  @scroll="handleScroll"
		  :style="{
			  top:top,
			  ...style
		  }"
		>
		 <slot></slot>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			// 隐藏滚动条
			showScrollbar: {
				type: Boolean,
				default: true
			},
			top: {
				type: String,
				default: "-10px"
			},
			style: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
		  handleScroll(e) {
		    // console.log('滚动位置:', e.detail.scrollLeft);
		  }
		}
	}
</script>

<style lang="scss" scoped>
.horizontal-scroll-container {
  scroll-snap-type: x mandatory; /* 启用吸附 */
}
.item {
  scroll-snap-align: start; /* 吸附到起始位置 */
}
</style>
